<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 给Function的显示原型身上添加一个方法 fn调用会顺原型链找到Function显示原型身上的方法并调用
    Function.prototype.myCall = function (context, ...arg) {
      /* 
        //以下边的使用案例举例
          在这个函数中,可以通过this拿到fn
          目标:调用fn   把fn的this指向context  返回fn的返回值
      */
      //对context判断 如果是空值 this指向window
      if (context === null || context === undefined) {
        context = window;
      }
      if (typeof context !== "object" && typeof context !== "function") {
        context = Object(context);
      } 
      //给context扩展一个属性 值为fn(this) 使用Symbol创建一个独一无二的值作为属性 避免和context原有的属性冲突 上下文对象调用的this
      const sy1 = Symbol('sy1');
      context[sy1] = this;
      //调用context新扩展的方法 context新增的属性所代表的fn就会调用,并把this指向context fn的返回值也会被re接收
      const re = context[sy1](...arg);

      //用完这个sy1属性 就删掉 不要对原context对象产生影响
      delete context[sy1];

      return re;
    }
    function fn(a, b) {
      console.log(this, a + b)
      return 1;
    }
    // const re = fn.myCall({}, 1, 2)
    console.log(fn.myCall({}, 1, 2))
    // console.dir(Function, 'Fu');
  </script>
</body>

</html>